<template>
    <div>
        <div class="goodsContent">
            <router-link class="goodsItem" :to="`goodsInfo/${ item.id }`"  v-for="item in goodsList" :key="item.id" tag="div">
                <img :src="item.img_url">
                <h3 class="title">{{ item.title }}</h3>
                <div class="info">
                    <span class="price">￥{{ item.sell_price }}</span>
                    <span class="oldPrice">￥{{ item.market_price }}</span>
                    <div class="sell">
                        <span>热卖中</span>
                        <span>剩余：{{ item.stock_quantity }}件</span>
                    </div>
                </div>
            </router-link>
        </div>
        <mt-button type="danger" size="large" @click="addMore">加载更多</mt-button>
    </div>
</template>

<script>
    // 引入 提示框
    import { Toast } from 'mint-ui'

    export default {
        data() {
            return {
                // 商品列表数据
                goodsList: [],
                // 当前 pageIndex
                currentPage: 1
            }
        },
        created() {
            this.getGoodsList()
        },
        methods: {
            // 获取 商品列表
            getGoodsList() {
                this.$http.get(`api/getgoods?pageindex=${ this.currentPage }`)
                    .then(function (data) {
                        var data = data.body
                        // 后面 和 之前类似 不做处理
                        if (data.status !== 0) return toastFn('数据获取失败')
                        console.log(data)

                        if (!data.message.length) return toastFn('没有更多商品了')
                        // 原来的数据 和 获得的数据 进行连接
                        this.goodsList = this.goodsList.concat(data.message)
                    }, function () {
                        return toastFn('Server error 500')
                    })
            },
            // 加载更多 商品
            addMore() {
                console.log('on tap')
                this.currentPage++
                this.getGoodsList()
            }
        }
    }

    // 服务器错误 函数
    function toastFn (msg) {
        Toast({
            message: msg,
            position: 'middle',
            duration: 5000
        })
    }
</script>

<style scoped lang="less">
    .goodsContent {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 10px;
        padding-bottom: 0;
        justify-content: space-between;
        .goodsItem {
            display: flex;
            width: 48%;
            box-shadow: 0 0 5px #333;
            margin-bottom: 15px;
            flex-direction: column;
            justify-content: space-between;
            img {
                width: 100%;
            }
            .title {
                font-size: 14px;
                padding: 0 4px;

            }
            .info {
                padding: 0 4px;
                background-color: #eee;
                color: #8f8f94;
                .price {
                    color: #f00;
                    font-size: 16px;
                    font-weight: bold;
                }
                .oldPrice {
                    font-size: 14px;
                    margin-left: 10px;
                }
                .sell {
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                }
            }
        }
    }
</style>